<template>
  <div class="company-manager">
    <div class="left">
      <div class="resize-bar" :style="cateTreeWidth"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <el-card class="el_card_define">
          <div slot="header">
            <h3>商品目录分类</h3>
          </div>
          <div class="left_wrap">
            <el-row
              type="flex"
              justify="space-between"
              class="add_root_category"
            >
              <el-button
                type="text"
                size="large"
                @click="handleAddRootCategory"
              >添加根分类</el-button>
              <el-button
                type="text"
                size="large"
                @click="changeMenuBtnState"
                :icon="treeMenuIconName"
              >{{ treeMenuBtnName }}</el-button>
            </el-row>
            <el-row>
              <CategorySelect
                :isShowSearch="!isMinTree"
                @getCategoryInfo="getInfoByCategoryTree"
                @getSelectCategory="getInfoByCategorySearch"
              ></CategorySelect>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
    <div class="right">
      <el-card class="el_card_define">
        <div slot="header">
          <h3>填写分类信息明细</h3>
        </div>
        <el-form v-show="parentFullPath">
          <el-form-item label="父级全路径" label-width="120px">
            <el-tag class="full_path">
              <span>{{ parentFullPath }}</span>
            </el-tag>
          </el-form-item>
        </el-form>
        <CategoryForm
          ref="categoryForm"
          :categoryLevel="categoryLevel"
          :categoryType="categoryType"
          :qualificationTypes="qualificationTypes"
          :handleOk="handleSubmit"
          :submitBtnLoading="btnLoading.submit"
        ></CategoryForm>
      </el-card>
    </div>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import CategorySelect from './components/CategorySelect';
import CategoryForm from './components/CategoryForm';
import { isResponseSuccess, isResponseSuccessState } from '@/utils/bizUtils';
export default {
  components: {
    CategorySelect,
    CategoryForm
  },
  inject: ['reloadPage'],
  data () {
    return {
      isMinTree: true,
      parentUuid: 'systemUuid',
      categoryLevel: '', // 当前所选品类等级
      categoryType: '', // 品类类型
      qualificationTypes: {}, // 资质类型（商品和分类）
      btnLoading: {
        submit: false
      },
      parentFullPath: '', // 父级全路径
      apiObj: {
        quaTypeProductList: { // 获取商品资质类型
          url: '/sysback/quatype/quaTypeProductList',
          type: 'post'
        },
        quaTypeCategoryList: { // 获取分类资质类型
          url: '/sysback/quatype/quaTypeCategoryList',
          type: 'post'
        },
        createPlatCategory: {
          url: '/sysback/category/productplatformcategoryaudit/createPlatCategory',
          type: 'post'
        }
      }
    }
  },
  computed: {
    // 分类树宽度
    cateTreeWidth () {
      return this.isMinTree ? 'width: 300px;' : 'width: 600px;';
    },
    // 分类树的大小区域图标名
    treeMenuIconName () {
      return this.isMinTree ? 'el-icon-arrow-right' : 'el-icon-arrow-left';
    },
    // 分类树的大小区域按钮名
    treeMenuBtnName () {
      return this.isMinTree ? '展开查询' : '收起查询';
    },
  },
  mounted () {
    this.loadInitDataInMounted();
  },
  methods: {
    // 添加跟分类
    handleAddRootCategory () {
      this.reloadPage(); // 重载页面
    },
    // 提交
    handleSubmit (result) {
      this.submitFormData({
        ...this.apiObj.createPlatCategory,
        data: { ...result, parentUuid: this.parentUuid }
      });
    },
    // 提交表单内容
    async submitFormData ({ url, type, data = {}, isFormData = false }) {
      this.btnLoading.submit = true;
      let loadingInstance = this.$loading({ target: '.category_form_wrap' });
      try {
        const res = await ApiRequest(url, type, data, isFormData);
        this.btnLoading.submit = false;
        loadingInstance.close();
        if (isResponseSuccessState(res.retStatus)) {
          this.$message.success('提交成功');
          this.$router.push({ name: 'categoryAuditList' });
        }
      } catch (err) {
        this.btnLoading.submit = false;
        loadingInstance.close();
      }
    },
    // 加载初始数据在mounted时期
    loadInitDataInMounted () {
      this.getDataSourceByPromiseAll();
    },
    // 获取分类信息 by 品类树
    getInfoByCategoryTree (data) {
      if (data.levelNum === '4') { // 四级类给三级类的id，其余就给自己的id
        this.parentUuid = data.parentUuid;
      } else {
        this.parentUuid = data.categoryUuid;
      }
      this.categoryLevel = data.levelNum;
      this.parentFullPath = this.getParentFullPath(data.levelNum, data.categoryPath);
      this.categoryType = data.categoryTypeL1;
    },
    // 获取分类信息 by 品类查询
    getInfoByCategorySearch (data) {
      this.categoryLevel = data.levelNum;
      this.parentUuid = data.categoryUuid;
      this.categoryType = data.categoryType;
      this.parentFullPath = this.getParentFullPath(data.levelNum, data.fullNames);
    },
    // 获取父级全路径
    getParentFullPath (levelNum, categoryPath) {
      if (levelNum === '4') {
        let splitPath = categoryPath.split('>');
        splitPath.pop();
        return splitPath.join('>');
      }
      return categoryPath;
    },
    // 改变分类树的大小区域状态
    changeMenuBtnState () {
      this.isMinTree = !this.isMinTree;
    },
    // 同步请求商品资质类型和分类资质类型的api
    getDataSourceByPromiseAll () {
      const loadingInstance = this.$loading({ target: '.category_form_wrap' });
      Promise.all([
        this.getProductQualificationTypes(),
        this.getClassifyQualificationTypes()
      ]).then(([productResult, classifyResult]) => {
        loadingInstance.close();
        this.qualificationTypes = {
          productResult: this.getQualificationTypesByInit(productResult, '1'),
          classifyResult: this.getQualificationTypesByInit(classifyResult, '2')
        }
      }).catch(() => {
        loadingInstance.close();
      });
    },
    // 获取商品资质类型
    async getProductQualificationTypes () {
      const retData = await this.postRequestRelativeData({
        ...this.apiObj.quaTypeProductList
      });
      return retData;
    },
    // 获取分类资质类型
    async getClassifyQualificationTypes () {
      const retData = await this.postRequestRelativeData({
        ...this.apiObj.quaTypeCategoryList
      });
      return retData;
    },
    // 获取初始化资质类型数据
    getQualificationTypesByInit (list, relType) {
      return _.cloneDeep(list).map(item => { // 新增页初始化
        return {
          qualificationTypeName: item.quaTypeName,
          qualificationTypeNo: item.quaTypeNo,
          mustHave: '2',
          potentialMustHave: '2',
          selected: false,
          relType
        }
      });
    },
    // 获取相关数据post请求
    async postRequestRelativeData ({ url, type, data = {}, isFormData = false }) {
      const res = await ApiRequest(url, type, data, isFormData);
      if (isResponseSuccess(res)) {
        return res.retData;
      }
    }
  }
}
</script>
<style lang="less" scoped>
.company-manager {
  display: flex;
  background-color: #fff;
  .left {
    height: 800px;
    position: relative;
    .resize-save {
      position: absolute;
      top: 0;
      right: 5px;
      bottom: 0;
      left: 0;
      padding: 16px;
      overflow-x: hidden;
    }
    .resize-bar {
      height: inherit;
      resize: horizontal;
      opacity: 0;
      cursor: ew-resize;
      min-width: 300px; /* 最小宽度 300px */
      max-width: 600px; /* 最大宽度 600px */
      overflow: scroll;
    }
    .resize-line {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      border-right: 2px solid #eee;
      border-left: 2px solid #bbb;
      pointer-events: none;
    }
    .resize-bar:hover ~ .resize-line,
    .resize-bar:active ~ .resize-line {
      border-left: 2px dashed #63a8fc;
    }
    .resize-bar::-webkit-scrollbar {
      width: 300px;
      height: inherit;
    }
  }
  .right {
    height: 100%;
    padding: 16px;
    flex: 1 1 auto;
    box-sizing: border-box;
    overflow: auto;
    max-height: 800px;
  }
}
.el_card_define {
  min-height: 100%;
  height: 100%;
  /deep/ .el-card__body {
    height: 100%;
  }
}

.min_tree {
  width: 300px;
}
.max_tree {
  width: 600px;
}
</style>
